<template>
  
  <div class="swiper-container" v-loading = listLoading :element-loading-text="elementLoadingText">
    <el-tabs :tab-position="tabPosition" style="height: 700px;" >
      <el-tab-pane 
        v-for="(item, index) in swiperList"
        :key="index"
        :label="'轮播图'+(index+1)"
      >
      <el-scrollbar style="height: 700px;">
        <el-form :model="item" label-width="80px">
          <el-form-item label="轮播图片" prop="imageSrc">
            <el-upload
              class="upload-logo"
              :headers="headers"
              list-type="picture"
              :on-progress="uploadImageLoading"
              :before-upload="beforeImageUpload"
              :action="'/home/info/uploadImage?type=1&fileName=轮播图' + (index + 1)"
              :on-success="((file,fileList)=>{return handleUploadSuccess(file,fileList,index)})"
              :show-file-list="false"
            >
              <el-tooltip effect="dark" content="点击重新上传" placement="right">
                <img :src="item.imageSrc">
              </el-tooltip>
            </el-upload>
          </el-form-item>
          <el-form-item label="是否展示" prop="isShow">
            <el-switch
              @change='changeShow($event,index)'
              v-model="item.isShow"
              :active-value="1" 
              :inactive-value="0">
            </el-switch>
          </el-form-item>
          <el-form-item label="跳转方式" prop="openType">
            <el-select v-model="item.openType">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="跳转地址" prop="navigateUrl">
            <el-input v-model.trim="item.navigateUrl"></el-input>
          </el-form-item>
        </el-form>
        <div style="text-align: center;" class="dialog-footer">
          <el-button type="primary" @click="save(item)">更新</el-button>
        </div>
      </el-scrollbar>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import { getSwiperList, updateSwiperInfo } from '@/api/home'
  import { getToken } from '@/api/user'

  export default {
    data() {
      return {
        headers: {
          'x-auth0-token': getToken()
        },
        tabPosition: 'left',
        listLoading: true,
        elementLoadingText: '努力加载中~请稍等',
        swiperList: [],
        options: [{
          value: 'navigate',
          label: 'navigate'
        }, {
          value: 'switchTab',
          label: 'switchTab'
        }]
      }
    },
    created(){
      this.getSwiper()
    },
    methods: {
      async getSwiper() {
        this.listLoading = true
        const {data} = await getSwiperList()
        this.swiperList = data
        this.listLoading = false
      },
      changeShow($event,index) {
        this.swiperList[index].isShow = $event
      },
      save(swiperInfo){
        this.$confirm('您确定要更新该轮播图信息吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info '
        }).then(() => {
          this.update(swiperInfo)
        });
      },
      async update(swiperInfo){
        this.listLoading = true
        // 记录：不知为何，传数字0一直传不过去，属性会直接丢失，不得已将isShow属性转为字符传给后端Integer接收
        const swiper = JSON.parse(JSON.stringify(swiperInfo))
        swiper.isShow = swiper.isShow + ''
        const {code} = await updateSwiperInfo(swiper);
        this.listLoading = false
        if (code===1000) {
          this.$message({
            type: 'success',
            message: '更新成功'
          });     
        } else {
          this.$message.error('更新失败，请检查网络是否正常');
        }
      },
      uploadImageLoading() {
        this.listLoading = true
      },
      beforeImageUpload(file) {
        const isImage = file.type === 'image/jpeg' || file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isImage) {
          this.$message.error('图片只能是 JPG 或 PNG 格式!');
        }
        this.fileName = file.name
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isImage && isLt2M;
      },
      handleUploadSuccess(res, file, index){
        this.swiperList[index].imageSrc = res.data
        this.listLoading = false
      }
    }
  }

</script>